<template>
  <div>

  </div>
</template>

<script>
import { useStore } from 'vuex'
import { computed, onBeforeUnmount, ref, watch } from 'vue'
const { remote, ipcRenderer } = window.require('electron')
export default {

  setup() {
    const Audio = document.createElement("audio")
    Audio.autoplay = false

    const store = useStore()
    const musicInfo = computed(() => {
      return store.state.musicInfo || {}
    })
    const musicIsPlay = computed(() => {
      return store.state.musicIsPlay || false
    })


    watch(() => musicInfo.value, val => {
      console.log('watch----', val);
      Audio.src = val.mp3Url
      Audio.pause()
      Audio.play()
      store.commit('setMusicIsPlay', true)
    })

    ipcRenderer.on('change-music-play', () => {
      if (musicIsPlay.value) {
        console.log('llllllllllll----stop');
        // setMusicIsPlay
        store.commit('setMusicIsPlay', false)
        Audio && Audio.pause()

      } else {
        if (musicInfo.value.mp3Url) {
          console.log('llllllllllll----play');
          store.commit('setMusicIsPlay', true)
          musicInfo.value.mp3Url && Audio && Audio.play()
        }
      }
    })


    onBeforeUnmount(() => {
      Audio.pause()
    })
  },


}
</script>

<style>
</style>